<template>
  <div>
    <search-form
      v-if="!type"
      :search-config="searchConfig"
      :label-width="110"
      class="query-form"
      @search="handleSearch"
      @visible-change="$refs.refTable1.refreshTableHeight()"
    />
    <table-box
      ref="refTable1"
      :table-config="tableConfig1"
      :other-filters="otherFilters"
      show-index
      no-request
      :table-height="400"
      show-selection
      @selection-change="selectChange"
      @btnOperate="btnOperate"
    />
    <import-files title="导入配置清单" :visible.sync="importVisible" :config="fileImportConfig" @success="handleImportSuccess" />
    <export-files v-if="showExport" :visible.sync="showExport" :config="exportConfig" />
  </div>
</template>

<script>
import { deleteOrnamentList } from '@/api/proConfig'
export default {
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    const fileBaseHead = () => {
      let H = ''
      if (process.env.NODE_ENV === 'development') {
        H = 'https://uipdev.quanyou.com.cn/img/product'
      } else {
        H = 'https://uip.quanyou.com.cn/img/product'
      }
      return H
    }
    return {
      tableSelected: [],
      tableConfig1: {
        hideSearchBar: true,
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/productConfigDetailedList/page`,
        setting: [
          {
            prop: 'useZones',
            label: '使用区域',
            minWidth: 100,
            sortable: false
          },
          {
            prop: 'useScenario',
            label: '使用场景',
            sortable: false,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_TYPE'
            },
            minWidth: 100
          },
          {
            prop: 'materialCode',
            label: '物料编码',
            sortable: false
          },
          {
            prop: 'materialDescription',
            label: '物料描述',
            minWidth: 100,
            sortable: false
          },
          {
            prop: 'materialNumber',
            label: '数量',
            sortable: false
          },
          {
            prop: 'materialSpecification',
            label: '物料规格',
            sortable: false
          },
          {
            prop: 'remoteProductPhotoInfoDTOS',
            label: '物料图片',
            minWidth: 120,
            sortable: false,
            render: function(h, row) {
              if (row.remoteProductPhotoInfoDTOS && row.remoteProductPhotoInfoDTOS.length > 0) {
                const picPath = row.remoteProductPhotoInfoDTOS[0].picturePath
                const prePicList = row.remoteProductPhotoInfoDTOS.map(item => fileBaseHead() + item.picturePath)
                return h('el-image', {
                  style: { 'width': '100px', 'height': '100px' },
                  props: {
                    src: fileBaseHead() + picPath,
                    'preview-src-list': prePicList
                  }
                })
              } else {
                return (<div>  </div>)
              }
            }
          },
          {
            prop: 'useSeries',
            label: '使用系列',
            minWidth: 120,
            sortable: false
          }
        ],
        btnList: [{
          buttonName: '导出',
          optCode: 'export',
          outerFlag: true
        }].concat(this.type ? [] : [{
          buttonName: '导入',
          optCode: 'import',
          outerFlag: true
        }, {
          buttonName: '删除',
          optCode: 'delete',
          outerFlag: true
        }])
      },
      showExport: false,
      importVisible: false,
      fileImportConfig: [
        {
          code: 'import',
          name: '配置清单导入',
          async: false,
          apiUrl: `${process.env.VUE_APP_BASE_API}/api/v1/productConfigDetailedList/import?productConfigSheetId=${this.id}`
        }
      ],
      otherFilters: [],
      searchConfig: [{
        label: '使用区域',
        prop: 'useZones',
        type: 'text',
        operator: 'like'
      }, {
        label: '物料描述',
        prop: 'materialDescription',
        type: 'text',
        operator: 'like'
      }, {
        label: '物料编码',
        prop: 'materialCode',
        type: 'text',
        operator: 'like'
      }, {
        label: '使用系列',
        prop: 'useSeries',
        type: 'text',
        operator: 'like'
      }],
      exportConfig: [{
        code: 'export', // 导出编码，前段定义，同一个config中code不能重复
        name: '配置清单导出', // 导出名称，如：商品导出，导出用户
        async: false, // 是否异步
        dataApi: `${process.env.VUE_APP_BASE_API}/api/v1/productConfigDetailedList/export`, // 导出数据的接口地址
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'id'
      }, {
        code: 'exportTemp', // 导出编码，前段定义，同一个config中code不能重复
        name: '配置清单模板导出', // 导出名称，如：商品导出，导出用户
        async: false, // 是否异步
        templateMethod: 'post',
        templateApi: `${process.env.VUE_APP_BASE_API}/api/v1/productConfigDetailedList/exportModel`, // 导出数据的接口地址
        templateCode: ''
      }]
    }
  },
  computed: {
    id() {
      const id = this.$route.params.id || this.$route.params.data.id
      return id
    }
  },
  mounted() {
    this.otherFilters[0] = { 'id': 'productConfigSheetId', 'property': 'productConfigSheetId', 'operator': '=', 'value': this.id }
    this.$refs.refTable1.initTableData('opCondition')
    this.$refs.refTable1.refreshTableHeight()
  },
  methods: {
    handleSearch(params) {
      const baseFilter = [{ 'id': 'productConfigSheetId', 'property': 'productConfigSheetId', 'operator': '=', 'value': this.id }]
      this.otherFilters = baseFilter.concat(params.filtersRaw)
      this.$nextTick(() => {
        this.$refs.refTable1.initTableData('opCondition')
      })
    },
    btnOperate(code) {
      switch (code) {
        case 'export':
          this.handleExport()
          break
        case 'import':
          this.handleImport()
          break
        case 'delete':
          if (!this.singleJudge(this.tableSelected, '删除', false)) return
          this.handleDelete()
          break
        default:
          break
      }
    },
    selectChange(v) {
      this.tableSelected = v
    },
    handleExport() {
      const allFilter = this.$refs.refTable1.getAllFilters()
      this.otherFilters[0] = { 'id': 'productConfigSheetId', 'property': 'productConfigSheetId', 'operator': '=', 'value': this.id }
      const filtersRaw = this.otherFilters.concat(allFilter.searchBarFilter)
      const exportConfig = this.exportConfig[0]
      exportConfig.filtersRaw = filtersRaw
      exportConfig.selectedRows = this.tableSelected || []

      this.$set(this.exportConfig, 0, exportConfig)
      this.$nextTick(() => {
        this.showExport = true
      })
    },
    handleImport() {
      this.fileImportConfig[0].apiUrl = `${process.env.VUE_APP_BASE_API}/api/v1/productConfigDetailedList/import?productConfigSheetId=${this.id}`
      this.importVisible = true
    },
    handleImportSuccess() {
      this.$refs.refTable1.initTableData('opCondition')
    },
    handleDelete() {
      this.$confirm(`此操作将删除当前所选数据,是否继续`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.tableSelected.map(item => item.id)
        deleteOrnamentList(ids).then(res => {
          if (res.success) {
            this.$message({
              message: res.msg || '删除成功',
              type: 'success'
            })
            this.$refs.refTable1.initTableData('opCondition')
          }
        })
      })
    }
  }
}
</script>
